import {  Card, List, Pagination, Skeleton, Typography } from 'antd'
import { LikeIcon } from 'Global/Icon'
import React, { useCallback, useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'

import './index.scss'
import axios from 'axios';

import { dateRender } from 'Utils'

const { Paragraph } = Typography

export interface Abstractimage<T>{
  author:T
}

export type UserAuthor ={
  id:number
  name:string
}

type ListData = Abstractimage<UserAuthor> & {
  id: number
  content: string
  createTime:string
  updateTime: string
  commentCount:number
  labelCount:number
  images:string[]
}

const ForumHome = () => {
  const history = useHistory()
  const [listData, setListData] = useState<ListData[]>([])
  const [page, setPage] = useState<number>(1)
  const [total, setTotal] = useState<number>()
  const [loading, setLoading] = useState<boolean>(true)


  const fetchArticle = useCallback(async () => {
    setLoading(true)
    setTotal(undefined)
    axios.get('http://localhost:3000/moment?offset=0&size=100')
    .then(function (response) {
      const list = response.data as ListData[]
      setListData(
     list
    )
    
    setLoading(false)
    })
    .catch(function (error) {
      console.log(error);
    });
  }, [])

  const skeleton = [1, 2, 3, 4, 5]

  useEffect(() => {
    fetchArticle()
  }, [fetchArticle])

  return (
    <>
      <Card className="post_card">
        <div>
          {loading ? (
            <>
              <List
                itemLayout="vertical"
                dataSource={skeleton}
                loading={!listData}
              />
              <Skeleton loading={loading} active avatar></Skeleton>
              <Skeleton loading={loading} active avatar></Skeleton>
              <Skeleton loading={loading} active avatar></Skeleton>
              <Skeleton loading={loading} active avatar></Skeleton>
            </>
          ) : (
            <>
              <List
                itemLayout="vertical"
                dataSource={listData}
                loading={!listData}
                renderItem={(item) => (
                  <>
                    <List.Item>
                      <List.Item.Meta
                        className="list-meta"
                        title={
                          <button
                            className="list-item-title"
                            onClick={() => {
                              history.push('/home/post_page', {
                                id: item.id,
                                content:item.content,
                                write_time:item.createTime,
                                commentCount:item.commentCount
                              })
                            }}
                          > 
                            <div dangerouslySetInnerHTML={{ __html: item.content || '' }} />
                          </button>
                        }
                      />
                      <Paragraph
                        className="context_shortcut"
                        ellipsis={{ rows: 2 }}
                      >
                             <div dangerouslySetInnerHTML={{ __html: item.content || '' }} />
                      </Paragraph>
                      <div className="list-foot">
                        <div>评论条数：{item.commentCount}</div>
                        <div>创建时间：
                        {dateRender(item.createTime)}</div>
                        <div><LikeIcon
                          className="like-icon"
                          width="14"
                          height="14"
                        />作者:
                        {item.author.name}</div>
                      </div>
                    </List.Item>
                  </>
                )}
              />
            </>
          )}
        </div>
      </Card>
      <div className="pagination-foot">
        <Pagination
          hideOnSinglePage
          defaultCurrent={page}
          total={total}
          onChange={setPage}
        />
      </div>
    </>
  )
}

export default ForumHome
